<template>
  <div class="zizhiBox">
    <headerCommon></headerCommon>
    <div class="imgBox w1200">
      <img class="bannerImg" :src="require('@/assets/aboutUs/zizhi.jpg')" alt="" />
      <el-divider content-position="center">证书</el-divider>
      <ul class="zizhiBox">
        <li v-for="(item, index) in state.imgList">
          <img :src="item.imgItem" />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import headerCommon from '@/components/common/headerCommon'
import { reactive } from 'vue'
export default {
  components: {
    headerCommon,
  },
  setup() {
    const state = reactive({
      imgList: [
        {
          name: '授权函',
          imgItem: require('@/assets/aboutUs/zizhi3.png'),
        },
        { name: '合作伙资质', imgItem: require('@/assets/aboutUs/zizhi3.png') },
        { name: '经销商资质', imgItem: require('@/assets/aboutUs/zizhi3.png') },
      ],
    })
    return {
      state,
    }
  },
}
</script>
<style scoped lang="less">
.zizhiBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .imgBox {
    .bannerImg {
      width: 100%;
      height: auto;
      display: block;
      text-align: center;
    }
    .zizhiBox {
      margin: 21px 0 0px;
      > li {
        display: flex;
        justify-content: center;
        margin: 12px 0;
      }
    }
  }
}
</style>
